<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="讲师详情"
        :border="false"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
        color="#fff"
      >
        <template #right> </template>
      </van-nav-bar>


      <div class="detail_cart">
      <img
        alt=""
        class="img"
        src="http://120.53.31.103:84/uploads/image/2021-06-27/iwJMzyDRE8JaruzpKsApVPuMNhRyYjen8SYaqjgg.png"
      />
      <div class="cart_content">
        <p class="name"></p>
        <p class="cart_xq">
          <span>女</span
          ><span> 年教龄</span>
        </p>
      </div>
      <div class="cart_right">取消关注</div>
    </div>

    </div>

    <div class="count">
      
    <van-tabs v-model="active" title-active-color="rgb(235, 97, 0)">
      <van-tab title="待上课">
      </van-tab>
      <van-tab title="已上课">
      </van-tab>
      <van-tab title="已取消">
        <img src="http://xl.9yuecloud.com/assets/img/empty.0d284c2e.png" alt="">
        <p class="bottom">暂无评价</p>
      </van-tab>
    </van-tabs>
    </div>
  </div>
</template>
  
  <script>
    
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
  
  <style scoped lang="scss">
.van-nav-bar {
  background-color: transparent;
}
.van-nav-bar__content {
}
::v-deep .header {
  width: 100%;
  height: 2.667rem;
  background: #5ba2f4;
  color: #fff;
}
.detail_cart{
  
  height: 2.667rem;
    width: 95%;
    margin: 0 auto;
    background: #fff;
    border-radius: 0.133rem;
    display: flex;
    align-items: center;
    img{
      
    width: 1.333rem;
    height: 1.333rem;
    margin: 0 0.267rem;
    border-radius: 100%;
    }
    .cart_content{
      flex: 1;
      .cart_xq{
        color: #777;
      }
    }
    .cart_right{
      width: 1.653rem;
    height: 0.747rem;
    background: #ebeefe;
    border-radius: 0.4rem;
    text-align: center;
    line-height: .747rem;
    color: #eb6100;
    margin: 0 .267rem;
    }
}
.count{
  
  width: 100%;
    margin: 0 auto;
    background: #fff;
    color: #777;
    margin-top: 1.6rem;
    font-size: .347rem;
    img{
      width: 100%;
      height: auto;
    }
    .bottom{
      text-align: center;
    }
}
</style>